<!-- 视频详情页 -->
<template>
  <div>
    <common-header :tittle="tittle" :showmore="true" class="head"></common-header>
	<div class="hello">
    
		<d-player ref="player" @play="play" :logo="logo" :lang="lang" :video="video" :contextmenu="contextmenu"></d-player>
		<div class="content">

			<div class="nav-h">
				<h2>云南小粒咖啡：来自高原的中国式醇香</h2>
				<div class="edible_ethod">
					<div>
						<span>食用方法</span>
						<span>2018-12-26</span>
					</div>
					<span>官方出品</span>
				</div>
			</div>

			<!-- 周边产品 -->
			<div class="peripheral-products">
				<div class="link">
					<h3>周边产品</h3>
					<router-link to="/gallery" style="width: 100%;">
						<span>去商城</span>
					</router-link>
				</div>
				<div class="imglist">
					<span>
						<img src="@/assets/imgs/thr_mg1.png" alt="">
					</span>
					<span>
						<img src="@/assets/imgs/thr_mg2.png" alt="">
					</span>
					<span>
						<img src="@/assets/imgs/thr_mg3.png" alt="">
					</span>
				</div>
			</div>

			<!-- 相关阅读 -->
			<div class="reading">
				<imgText :tittle="experience" :items="items"></imgText>
			</div>

			<!-- 全部评论 -->
			<div class="all-comments">
				<h3>全部评论</h3>
			</div>
			<img-view :isShow="showImg" :imgSrc="imgSrc" @imgBgHide="imgBgHide" :deflaultIndex="defaultIndex" @handleChange="handleChange"></img-view>
		</div>
	</div>
  </div>

</template>

<script>
  import commonHeader from 'common/common-header-transparent'
	import imgView from 'common/photos';
	import VueDPlayer from 'common/VueDPlayerHls';
	import imgText from 'common/imgText';
	import logoImg from '@/assets/imgs/video-img.jpg';
	export default {
		name: 'HelloWorld',
		data() {
			return {
				showImg: false,
				imgSrc: [
          {
						'img': require('../../../assets/imgs/banner1.png')
					},
          {
          	'img': require('../../../assets/imgs/banner1.png')
          },
          {
          	'img': require('../../../assets/imgs/banner1.png')
          },
					
				],
				defaultIndex: 0,
				title: "视频详情页",
				experience: "相关阅读",
				items: [{
						text: '《必由之路》第七集速览 解说词  第八集速览',
						type: "体验",
						num: '1000',
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						link: "www.baidu.com",
					},
					{
						text: '受惠于港珠澳大桥及高铁开通 今年访港6000万受惠于港珠澳大桥及高铁开通 今年访港6000万',
						type: "体验",
						num: '1000',
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						link: "www.baidu.com",
					},
					{
						text: '个税专项附加扣除办法有望出炉 首套房政策将明确',
						type: "体验",
						num: '1000',
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						link: "www.baidu.com",

					}
				],
				video: {
					quality: [{
						name: '240P',
						url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
					}, {
						name: '360P',
						url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
					}, {
						name: '720P',
						url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
					}],
					pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
					defaultQuality: 1,
					thumbnails: logoImg,
					type: 'hls'
				},
				lang: 'zh-cn',
				logo: '',
				autoplay: false,
				loop: false,
				player: null,
				mutex: true,
				contextmenu: [{
					text: '标题1',
					link: 'http://www.cnblogs.com/maqingyuan/'
				}, {
					text: '标题2',
					link: 'http://www.cnblogs.com/maqingyuan/'
				}, {
					text: '标题3',
					link: 'http://www.cnblogs.com/maqingyuan/'
				}],




			}
		},
		components: {
			'd-player': VueDPlayer,
			imgText,
			imgView,
      commonHeader
		},
		methods: {
			play() {
				console.log('开始播放...')
			},
			imgBgHide() { //点击遮罩层，遮罩层隐藏
				this.showImg = false;
			},
			handleChange(value) {
				this.defaultIndex = value;
			},
			collectImgSrc() { //点击图片放大
				var _this = this;
				var src = document.getElementsByTagName("img");
				for (var i = 0; i < src.length; i++) {
					_this.imgSrc.push(src[i].getAttribute("src"));
					src[i].setAttribute("data-index", i);
					src[i].onclick = function(e) {
						_this.showImg = true;
						_this.defaultIndex = parseInt(e.target.getAttribute("data-index")); //设置初始显示的轮播图的索引
					}
				}

			}


		},
		mounted() {
			this.collectImgSrc()
		},
		mounted() {
			//   this.player = this.$refs.player.dp;
			//   console.log(this.player);
			//   var hls = new Hls();
			//   hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
			//   hls.attachMedia(this.player);
		}
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
.header-box{
  z-index: 999;
}
	/*图片点击放大组件中swipe图片居中*/
	#imgEnlarge .mint-swipe-item-wrap>div {
		visibility: hidden;
		display: flex;
		-moz-box-pack: center;
		-webkit-box-pack: center;
		justify-content: center;
		-moz-box-align: center;
		-webkit-box-align: center;
		align-items: center;
		-webkit-align-items: center;
	}

	#imgEnlarge .mint-swipe-item-wrap>div.is-active {
		visibility: visible;
		display: flex;
		-moz-box-pack: center;
		-webkit-box-pack: center;
		justify-content: center;
		-moz-box-align: center;
		-webkit-box-align: center;
		align-items: center;
		-webkit-align-items: center;
	}

	h3 {
		position: relative;
		text-indent: 8px;
		font-size: 17px;
		font-weight: bold;
		text-align: left;

		&:after {
			position: absolute;
			content: '';
			width: 4px;
			height: 15px;
			border-radius: 2px;
			background: @base-blue-color;
			left: 0;
			right: 0;
			top: 1px;
			margin-left: 0;
			margin-right: auto;
		}
	}

	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}

	.hello {
		width: 750px;
		margin: 0 auto 50px;
	}

	@media only screen and (max-width: 640px) {
		.hello {
			width: 100%;
		}
	}

	.content {
		padding: 0px 0px 55px 0px;
		background: #fff;

		.nav-h {
			padding: 30px 0px 50px 0px;
			border-bottom: 7px solid @border-color;
			margin-bottom: 50px;

			h2 {
				font-size: 20px;
				font-weight: bold;
				color: @base-black-color;
				padding-bottom: 30px;
			}

			.edible_ethod {
				padding: 0px 15px 0px 15px;

				display: flex;
				justify-content: space-between;

				div {
					span {
						&:last-child {
							font-size: 12px;
							color: @base-color-gray;
						}

						&:first-child {
							font-size: 12px;
							margin-right: 20px;
							font-weight: 500;
							color: @base-blue-color;
						}
					}
				}

				span {
					color: @base-color-gray;
				}
			}
		}

		// 周边产品
		.peripheral-products {
			padding: 0px 15px 0px 15px;

			.link {
				display: flex;
				justify-content: space-between;

				h3 {
					margin-bottom: 20px;
				}

				a {
					color: @base-color-gray;
					text-align: right;
					width: 90px !important;
					margin-right: 18px;
					position: relative;

					&:after {
						content: '';
						position: absolute;
						width: 6px;
						height: 10px;
						right: -18px;
						background: url(../../../assets/imgs/home/details_more@2x.png);
						vertical-align: middle;
						top: 2px;
						background-size: 100% 100%;
					}
				}
			}

			.imglist {
				background: #ffffff;
				width: 100%;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;

				span {
					height: 110px;
					margin: 0 5px;
					text-align: center;
					width: 110px;
					display: inline-block;
					display: inline-block;

					&:first-child {
						margin-left: 0px;
					}

					&:last-child {
						margin-right: 0px;
					}

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.reading {
			padding: 0 15px 0px 15px;
			margin-top: 50px;
			border-bottom: 7px solid @border-color;

			.latestContents {
				border: none;
				padding: 0px;
				width: 100%;
			}
		}

		.all-comments {
			padding: 50px 15px 50px 15px;
		}


	}
</style>
